<!DOCTYPE HTML>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
<title>Generic - </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/js/movieplay/assets/css/main.css" />
</head>
<body>

<!-- Header -->
<header id="header">
	<a href="index.html" class="logo"><strong>速用科技</strong></a>
	<nav>
		<a href="#menu">菜单</a>
	</nav>
</header>

<!-- Nav -->
<nav id="menu">
	<ul class="links">
		<li><a href="/loa/tbMedia/index">返回</a></li>
	<!-- 	<li><a href="generic.html">Generic</a></li>
		<li><a href="elements.html">Elements</a></li> -->
	</ul>
</nav>

<!-- Main -->
<section id="main">
	<div class="inner">
		<!--<div class="image fit" id="video" >-->
			<!--&lt;!&ndash; <img src="/js/movieplay/images/pic11.jpg" alt="" />  &ndash;&gt;-->
		<!--</div>-->

		<div id="myvideo" style="width: 1000px;height: 600px;margin: auto" ></div>
		<header>
			<h1 th:text="${media.title}"></h1>
			<p class="info" th:text="${media.beforeTime}"></p>
		</header>
		<p th:text="${media.descript}"></p>
	</div>
</section>
<!-- Footer -->
<footer id="footer">
<!-- 	<ul class="icons">
		<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
		<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
		<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
	</ul> -->
	<div class="copyright">Copyright &copy; 2018.Company name All rights reserved.More Templates <a href="http://www.suyongw.com/" target="_blank" title="速用科技">速用科技</a> - Collect from <a href="http://www.suyongw.com/" title="速用官网" target="_blank">速用官网</a></div>
</footer>

<!-- Scripts -->
<script src="/js/movieplay/assets/js/jquery.min.js"></script>
<script src="/js/movieplay/assets/js/jquery.scrolly.min.js"></script>
<script src="/js/movieplay/assets/js/skel.min.js"></script>
<script src="/js/movieplay/assets/js/util.js"></script>
<script src="/js/movieplay/assets/js/main.js"></script>
<script type="text/javascript" src="/js/appjs/loa/tbMedia/ckplayer.js"></script>
<script src="http://qzs.qq.com/tencentvideo_v1/js/tvp/tvp.player.js" charset="utf-8"></script>
<script th:inline="javascript">
	var url = [[${url}]];
	var picture = [[${picture}]];
    var player = null;
    var elementLogin = null; //是否存在提示层
    var loginOrNo = true; //是否已登录，默认是没有登录
    var loginShow = false; //提示层是否是显示状态
    $(document).ready(function($) {

    	// loadVideo(url);
        playVideo();

    });
    function playVideo() {
        console.log('hello')
        var video = new tvp.VideoInfo();
        video.setVid(url);
        var player = new tvp.Player(1000,600);
        player.addParam("autoplay","0");
        player.addParam("pic",picture);  //定义视频初始页面显示的图片
        player.addParam("wmode","transparent");//设置透明化，不设置时，视频为最高级，总是处于页面的最上面，此时设置z-index无效
        player.setCurVideo(video);
        player.write("myvideo");  //视频输出的ID
    }
    //加载播放器
    function loadVideo(url) {
        var videoObject = {
            container: '#video', //容器的ID或className
            variable: 'player',//播放器名称
            volume: 0.6, //默认音量
            poster: picture, //封面图片地址
            autoplay: false, //是否自动播放
            loop: false, //是否循环播放
            live: false, //是否是直播
            loaded: 'loadedHandler', //当播放器加载后执行的函数
            seek: 0, //默认需要跳转的时间
            drag: '', //在flashplayer情况下是否需要支持拖动，拖动的属性是什么
            front: 'frontFun', //前一集按钮动作
            next: 'nextFun', //下一集按钮动作
            video: url

        };
        player = new ckplayer(videoObject);
    }

    //改变播放器的大小
    function changePlayerHeight(){
        var width=$('#video').width();
        var height=width*0.5;
        if(height<200){
            height=200;
        }
        if(height>500){
            height=500;
        }
        $('#video').css({height:height+'px'});
    }


     //播放器加载后会调用该函数
     function loadedHandler() {
           player.addListener('time', timeHandler); //监听播放时间,addListener是监听函数，需要传递二个参数，'time'是监听属性，这里是监听时间，timeHandler是监听接受的函数
           player.addListener('play', playHandler); //监听播放状态
           player.addListener('full', fullHandler); //监听全屏切换
           player.addListener('videochange',videoChangeHandler); //监听全屏切换

       }

     //监听播放状态
    function playHandler() {
           if(loginShow) {
               player.videoPause();
           }
       }

    //切换播放视频
	function changeMv(){

        player.deleteElement(elementLogin);
        elementLogin = null;
        loginShow = false;
        player.videoPlay();

		var s = "http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4";
		var newVideoObject = {
        container: '#video', //容器的ID
        variable: 'player',
        autoplay: true, //是否自动播放
        loaded: 'loadedHandler', //当播放器加载后执行的函数
        video: s
    }
    player.newVideo(newVideoObject);

}

       //监听全屏切换
       function fullHandler(b) {
           if(loginShow && elementLogin) {
               player.deleteElement(elementLogin);
               elementLogin = null;
               window.setTimeout('showLogin()', 200);
           }
       }
       //监听播放时间
       function timeHandler(t) {
           if(t >= 10 && !loginOrNo) { //如果播放时间大于10s，则又没有登录，则弹出登录/注册层
               player.videoPause();
               if(!loginShow && !elementLogin) {
                   showLogin();
               }
           }
       }
       //试看结束显示登录/注册层
       function showLogin() {
           loginShow = true;
           var meta = player.getMetaDate();
           var x = (meta['width'] - 307) * 0.5;
           var y = (meta['height'] - 39) * 0.5 - 80;
           var attribute = {
               list: [ //list=定义元素列表
                   {
                       type: 'image', //定义元素类型：只有二种类型，image=使用图片，text=文本
                       file: '/img/login_01.png', //图片地址
                       radius: 0, //图片圆角弧度
                       width: 140, //定义图片宽，必需要定义
                       height: 39, //定义图片高，必需要定义
                       alpha: 1, //图片透明度(0-1)
                       marginLeft: 0, //图片离左边的距离
                       marginRight: 0, //图片离右边的距离
                       marginTop: 0, //图片离上边的距离
                       marginBottom: 0 //图片离下边的距离
                   },
                   {
                       type: 'image', //定义元素类型：只有二种类型，image=使用图片，text=文本
                       file: '/img/login_02.png', //图片地址
                       radius: 0, //图片圆角弧度
                       width: 69, //定义图片宽，必需要定义
                       height: 39, //定义图片高，必需要定义
                       alpha: 1, //图片透明度(0-1)
                       marginLeft: 0, //图片离左边的距离
                       marginRight: 0, //图片离右边的距离
                       marginTop: 0, //图片离上边的距离
                       marginBottom: 0, //图片离下边的距离
                       clickEvent: 'javaScript->userLogin()'
                   },
                   {
                       type: 'image', //定义元素类型：只有二种类型，image=使用图片，text=文本
                       file: '/img/login_03.png', //图片地址
                       radius: 0, //图片圆角弧度
                       width: 70, //定义图片宽，必需要定义
                       height: 39, //定义图片高，必需要定义
                       alpha: 1, //图片透明度(0-1)
                       marginLeft: 0, //图片离左边的距离
                       marginRight: 0, //图片离右边的距离
                       marginTop: 0, //图片离上边的距离
                       marginBottom: 0, //图片离下边的距离
                       clickEvent: 'javaScript->userReg()'
                   },
                   {
                       type: 'image', //定义元素类型：只有二种类型，image=使用图片，text=文本
                       file: '/img/login_04.png', //图片地址
                       radius: 0, //图片圆角弧度
                       width: 28, //定义图片宽，必需要定义
                       height: 39, //定义图片高，必需要定义
                       alpha: 1, //图片透明度(0-1)
                       marginLeft: 0, //图片离左边的距离
                       marginRight: 0, //图片离右边的距离
                       marginTop: 0, //图片离上边的距离
                       marginBottom: 0 //图片离下边的距离
                   }
               ],
               x: x, //元件x轴坐标，注意，如果定义了position就没有必要定义x,y的值了，支持数字和百分比
               y: y, //元件y轴坐标
               alpha: 1, //元件的透明度
               backgroundColor: '0x000000', //元件的背景色
               backAlpha: 0.1, //元件的背景透明度(0-1)
               backRadius: 0 //元件的背景圆角弧度
           }
           elementLogin = player.addElement(attribute);

   }

    //登录后执行的播放或者跳转
    function userLogin() {
    	   loginOrNo = true;
           if(loginShow && elementLogin) {
               player.deleteElement(elementLogin);
               elementLogin = null;
               loginShow = false;
               player.videoPlay();
           }
    	//window.location.href='/login';
    }

    function userReg() {
    	window.location.href='/register';
    }
   //附加的处理用户登录后执行的动作
    function loginTrue() {
        loginOrNo = true;
        if(loginShow && elementLogin) {
            player.deleteElement(elementLogin);
            elementLogin = null;
            loginShow = false;
            player.videoPlay();
        }
    }
</script>

</body>
</html>